<template>
  <el-container>
    <!--头部布局-->
    <el-header class="el-header">
      <!--login、项目名-->
      <div class="left_box">
        <img class="img-header" src="@/assets/ilogo.png" alt="" />
      </div>
      <!--登录用户头像-->
      <div class="right_box">
        <el-dropdown>
          <div style="vertical-align: middle; cursor: pointer">
            <el-avatar
              :size="50"
              :src="this.userInfo.avatar"
              style="cursor: pointer"
            ></el-avatar>
          </div>
          <!--下拉菜单-->
          <el-dropdown-menu slot="dropdown" trigger="click">
            <el-dropdown-item>
              <span type="danger" @click="toWelcome"
                ><span class="el-icon-house"></span> &nbsp;系统首页</span
              >
            </el-dropdown-item>

            <el-dropdown-item>
              <span type="danger" @click="getContact"
                ><span class="el-icon-ship"></span> &nbsp;交流讨论</span
              >
            </el-dropdown-item>

            <el-dropdown-item>
              <span type="danger" @click="logout"
                ><span class="el-icon-switch-button"></span>
                &nbsp;退出登入</span
              >
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <Aside></Aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Aside from "./aside/aside";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    //退出登入
    async logout() {
      var res = await this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消退出登入",
        });
      });
      if (res == "confirm") {
        window.localStorage.clear();
        this.$router.push("/login");
      }
    },
    //去系统首页
    toWelcome() {
      this.$router.push("/welcome");
    },
    //获取用户信息
    async getUserInfo() {
      const { data: res } = await this.$http.get("user/info");
      if (res.code !== 200) {
        return this.$message.error("获取用户信息失败:" + res.msg);
      } else {
        this.userInfo = res.data;
        //保存用户
        this.$store.commit("setUserInfo", res.data);
      }
    },
    //点击交流
    getContact() {
      const w = window.open("about:blank");
      w.location.href = "";
    },
    setwidth(data) {
      console.log(data);
    },
  },
  mounted() {
    this.getUserInfo();
  },

  components: {
    Aside,
  },
};
</script>
<style scoped lang="less">
.el-container {
  height: 100%;
}
/*头部布局*/
.el-header {
  height: 400px;
  background-color: #001529;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  color: #ffffff;
  align-items: center;
  font-size: 20px;
  /*左边logo和标题*/

  .left_box {
    display: flex;
    align-items: center;
    padding: 50px;
    /*logo*/

    img {
      width: 350px;
      height: 60px;
      margin: 25px 10px;
    }

    /*标题*/

    span {
      margin-left: 15px;
    }
  }

  /*右边的登录头像*/

  .right_box {
    .el-dropdown > div {
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #ffffff;
        background-size: contain;
        vertical-align: middle;
      }

      span {
        font-size: 18px;
        color: white;
        text-align: center;
      }
    }
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  line-height: 20px;
  padding: 20px;
}
</style>